<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ui/pages/login.css">
		<link rel="stylesheet" type="text/css" href="ui/style.css">
		<link rel="stylesheet" type="text/css" href="ui/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="ui/bootstrap-responsive.min.css">
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
		  <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="ui/CreateUserValidation.js"></script>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script>
		// This adds 'placeholder' to the items listed in the jQuery .support object. 
		jQuery(function() {
		   jQuery.support.placeholder = false;
		   test = document.createElement('input');
		   if('placeholder' in test) jQuery.support.placeholder = true;
		});
		// This adds placeholder support to browsers that wouldn't otherwise support it. 
		$(function() {
		   if(!$.support.placeholder) { 
		      var active = document.activeElement;
		      $(':text').focus(function () {
		         if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
		            $(this).val('').removeClass('hasPlaceholder');
		         }
		      }).blur(function () {
		         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
		            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
		         }
		      });
		      $(':text').blur();
		      $(active).focus();
		      $('form:eq(0)').submit(function () {
		         $(':text.hasPlaceholder').val('');
		      });
		   }
		});
		</script>
	</head>

	<body>
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
		
					<a class="brand" href="index.html">
						<div class = pageHeader>CVS Holiday Management </div>
					</a>		
					
					<div class="nav-collapse">
						<ul class="nav pull-right">
							<li class="">						
								<a href="login" class="">
									Already have an account? Login now
								</a>
							</li>
						</ul>
					</div><!--/.nav-collapse -->	
				</div> <!-- /container -->
			</div> <!-- /navbar-inner -->
		</div> <!-- /navbar -->
		
		<br><br>
		
		<div class="account-container register">
			<div class="content clearfix">
				<form onsubmit="return checkForm(this)" method="post" action="/createUser">
					<p>Please enter your details below using your company email address</p>
						<div class="login-fields">
							<label for="j_username">Username</label>
							<input id="j_username" name="j_username" type="text" placeholder="Username"/><p></p>
							
							<label for="j_name">FirstName</label>
							<input id="j_name" name="j_name" type="text" placeholder="First Name"/><p></p>
		
							<label for="l_name">LastName</label>
							<input id="l_name" name="l_name" type="text" placeholder="Last Name"/><p></p>
							
							<label for="j_email">Email</label>
							<input id="j_email" name="j_email" type="text" placeholder="Email"/><p></p>
							
							<label for="j_password">Password</label>
							<input id="j_password" name="j_password" type="password" placeholder="Password"/><p></p>
							
							<label for="j_password2">Password</label>
							<input id="j_password2" name="j_password2" type="password" placeholder="Confirm Password"/><p></p>
		 				</div>
		 				<button type="submit" class="button btn btn-success btn-large">Register</button>
		 		</form>
		 	</div> 
		</div>
	</body>
</html>